<template>
  <view class="wrap">
    <view class="container" :style="{'margin': '0 '+mpWxPosition.bothSideMargin+'px'}">
      <view class="header">
        <view class="avatar">
          <image :src="userInfo.showAvatar" mode="aspectFit"></image>
        </view>
        <view class="user-info">
          <view class="nickname-setting">
            <view class="nickname">{{ mpUser.nickname }}</view>
            <view class="setting" v-if="false">
              <uv-icon name="setting" color="#2979ff" size="22" @tap="toSetting"></uv-icon>
            </view>
          </view>
          <view class="mobile-id">
            <view class="mobile">
              <view class="mobile-show">
                {{ userInfo.showMobile }}
              </view>
              <view class="mp-auth" v-if="false">
                <uv-icon name="reload" color="#2979ff" size="22"></uv-icon>
              </view>
            </view>
            <view class="uid">ID: {{ userInfo.showId }}</view>
          </view>
        </view>
      </view>
      <view class="functions">
        <uv-list :border="true">
          <uv-list-item title="设置" :show-badge="false" :badge="{value: '999+'}"
            @tap="toSetting"
            :show-arrow="true"
            :clickable="true"></uv-list-item>
        </uv-list>
      </view>
    </view>
  </view>
</template>

<script>
import { useMpWxPosition } from '@/stores/mpWxPosition'
import { useMpUser } from '@/stores/mpUser'
let _this
export default {
  name: 'User_Center_Index',
  beforeCreate() {
    _this = this;
  },
  data() {
    return {
      mpWxPosition: useMpWxPosition().getMpWxPosition,
      mpUser: useMpUser().getMpUser,
      userInfo: {
        showId: 0,
        showMobile: '',
        showNickname: '',
        showAvatar: ''
      }
    }
  },
  onLoad() {
    _this.showUserInfo()
  },
  onPullDownRefresh() {
    _this.$api.post('/user/center/index').then(res1 => {
      useMpUser().updateMpUser(res1.data.mpUser)
      _this.showUserInfo()
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    showUserInfo() {
      let mpUser = useMpUser().getMpUser
      if (mpUser) {
        _this.userInfo.showId = Number(mpUser.id) + 31070
        _this.userInfo.showMobile = mpUser.mobile || '手机号未设置'
        _this.userInfo.showNickname = mpUser.nickname
        _this.userInfo.showAvatar = mpUser.avatar
      }
    },
    toSetting() {
      uni.navigateTo({
        url: '/pages/user/center/setting'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$avatarHeight: 60px;
$headerHeight: $avatarHeight + 20px;
.wrap {
  .container {
    .header {
      display: flex;
      background: #FFFFFF;
      margin-top: 10px;
      border: 1px solid #EDEDED;
      border-radius: 8px;
      width: 100%;
      height: $headerHeight;
      justify-content: space-between;
      .avatar {
        height: $avatarHeight;
        margin-top: 10px;
        margin-left: 10px;
        image {
          height: $avatarHeight;
          width: $avatarHeight;
          border-radius: 6px;
        }
      }
      .user-info {
        width: 575rpx;
        margin: 10px 10px;
        .nickname-setting {
          display: flex;
          justify-content: space-between;
          .nickname {
            color: #00B7FF;
            font-weight: bold;
            font-size: 18px;
            line-height: 30px;
          }
          .setting {
            margin-top: 3px;
          }
        }
        .mobile-id {
          display: flex;
          justify-content: space-between;
          .mobile {
            line-height: 30px;
            color: #8F939C;
            display: flex;
            .mp-auth {
              margin-left: 5px;
              margin-top: 5px;
            }
          }
          .uid {
            //color: blue;
            font-size: 12px;
            line-height: 30px;
          }
        }
      }
    }
    .functions {
      margin-top: 10px;
    }
  }
}
</style>
